<script setup lang="ts">
import EyeDropper from './eye-dropper.vue'
import SwitchDark from './switch-dark.vue'
import SwitchGrey from './switch-grey.vue'
import SwitchLayout from './switch-layout.vue'
import SwitchRegionColor from './switch-region-color.vue'
import SwitchTheme from './switch-theme.vue'
import SwitchWatermark from './switch-watermark.vue'
import SwitchWritingMode from './switch-writing-mode.vue'

interface IState {
  visible: boolean
}

const state = reactive<IState>({ visible: false })
</script>

<template>
  <div
    id="g-base-guide-setting"
    class="setting"
    @click="state.visible = true"
  >
    <i class="i-carbon-settings text-#fff" />
  </div>

  <ElDrawer
    v-model="state.visible"
    direction="rtl"
    :show-close="false"
    :with-header="false"
  >
    <div>
      <div class="font-bold">
        暗黑模式
      </div>
      <SwitchDark />
    </div>

    <div class="mt-32px">
      <div class="font-bold">
        悼念模式
      </div>
      <SwitchGrey />
    </div>

    <div class="mt-32px">
      <div class="font-bold">
        水印模式
      </div>
      <SwitchWatermark />
    </div>

    <div class="flex gap-24px mt-32px">
      <div>
        <div class="font-bold">
          主题色
        </div>
        <SwitchTheme class="mt-6px" />
      </div>

      <div>
        <div class="font-bold">
          系统级取色器
        </div>
        <EyeDropper class="mt-6px" />
      </div>
    </div>

    <div class="mt-32px">
      <div class="font-bold">
        布局模式
      </div>
      <SwitchLayout class="mt-6px" />
    </div>

    <div class="mt-32px">
      <div class="font-bold">
        阅读/书写模式
      </div>
      <SwitchWritingMode class="mt-6px" />
    </div>

    <div class="mt-32px">
      <div class="font-bold">
        局部区域颜色设置
      </div>
      <SwitchRegionColor class="mt-12px" />
    </div>
  </ElDrawer>
</template>

<style lang="less" scoped>
.setting {
  position: fixed;
  z-index: 99;
  inset-block-start: 240px;
  inset-inline-end: 0px;
  inline-size: 36px;
  block-size: 36px;
  background-color: var(--el-color-primary);
  backdrop-filter: saturate(180%) blur(20px);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  border-end-start-radius: 8px;
  border-start-start-radius: 8px;
}
</style>l
